<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<body>
    <div id="app">
        请提问：<input v-model="question">
        <div>{{answer}}</div>
        <div :class="{ color}"></div>
    </div>
    <script>
        var x = new Vue({
            el:"#app",
            data:{
                question:'',
                answer:'我无法回答您的问题，除非你问我问题'
            },
            watch:{
                question:function(){
                    this.answer = "等您把问题输入完哦";
                    this.debouncedGetAnswer();
                    console.log("debouncedGetAnswer()方法被调用了")
                }
            },
            created:function(){
                this.debouncedGetAnswer =_.debounce(this.getAnswer,500);
            },
            methods:{
                getAnswer:function(){
                    console.log("getAnswer方法被调用了")
                    if(this.question.indexOf("?")===-1){
                        this.answer = "你提的问题没有问号！";
                        return;
                    }
                    this.answer = '输入中......';
                    var vm = this;
                    axios.get('https://yesno.wtf/api')
                    .then(function(val){
                        vm.answer = _.capitalize(val.data.answer)
                    })
                    .catch(function(error){
                        vm.answer = '对不起，您的问题我无法回答！'+error
                        
                    })
                }
            }
        });
    </script>
</body>
</html>